<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta
			name="viewport"
			content="width=device-width,  initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
		/>
		<title>player</title>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/gh/yuewuzhijian/cdn/css/spine-player.min.css"
		/>
		<link
			rel="stylesheet"
			href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/nano.min.css"
		/>
		<link rel="stylesheet" href="./style.css" />
		<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
		<script src="https://cdn.jsdelivr.net/gh/yuewuzhijian/cdn/js/spine-player.min.js"></script>
	</head>
	<body>
		<div id="index">
			<h1>Spine Web Player</h1>

			<span class="zocial-cal" id="img"></span>
			<div id="img-name"></div>
			<span class="zocial-call" id="atlas"></span>
			<div id="atlas-name"></div>
			<span class="zocial-appstore" id="json"></span>
			<div id="json-name"></div>

			<input type="file" id="file1" />
			<input type="file" id="file2" />
			<input type="file" id="file3" />

			<div class="setColor">
				<div class="label">设置背景色&nbsp;&nbsp;</div>
				<div class="color-picker"></div>
			</div>

			<button type="button" id="certain">确认</button>
		</div>

		<div id="player"></div>

		<script>
			// 默认背景色
			let backgroundColor = '#666666';
			// 创建拾色器
			const pickr = Pickr.create({
				el: '.color-picker',
				theme: 'nano',
				swatches: [
					'rgba(244, 67, 54, 1)',
					'rgba(233, 30, 99, 0.95)',
					'rgba(156, 39, 176, 0.9)',
					'rgba(103, 58, 183, 0.85)',
					'rgba(63, 81, 181, 0.8)',
					'rgba(33, 150, 243, 0.75)',
					'rgba(3, 169, 244, 0.7)',
				],
				default: backgroundColor,
				defaultRepresentation: 'HEXA',
				components: {
					preview: true,
					opacity: true,
					hue: true,
					interaction: {
						hex: false,
						rgba: false,
						hsva: false,
						input: true,
						clear: true,
						save: true,
					},
				},
			});
			// 设置颜色
			pickr.on('save', (color, instance) => {
				let arr = color.toHEXA();
				backgroundColor = '#' + arr.join('');
				pickr.hide();
			});

			let imgFile;
			let jsonFile;
			let atlasFile;

			let imgData;
			let jsonData;
			let atlasData;

			let filename = '';

			let index = document.getElementById('index');
			let img = document.getElementById('img');
			let atlas = document.getElementById('atlas');
			let json = document.getElementById('json');
			let imgName = document.getElementById('img-name');
			let atlasName = document.getElementById('atlas-name');
			let jsonName = document.getElementById('json-name');
			let file1 = document.getElementById('file1');
			let file2 = document.getElementById('file2');
			let file3 = document.getElementById('file3');
			let certain = document.getElementById('certain');
			let player = document.getElementById('player');

			img.onclick = function () {
				file1.click();
			};

			atlas.onclick = function () {
				file2.click();
			};

			json.onclick = function () {
				file3.click();
			};

			file1.onchange = function (e) {
				imgFile = e.target.files[0];
				imgName.innerText = '已选：' + imgFile.name;
			};

			file2.onchange = function (e) {
				atlasFile = e.target.files[0];
				atlasName.innerText = '已选：' + atlasFile.name;
			};

			file3.onchange = function (e) {
				jsonFile = e.target.files[0];
				jsonName.innerText = '已选：' + jsonFile.name;
			};

			// 读取纹理
			async function fetchTexture(arr) {
				return new Promise((resolve, reject) => {
					let url = window.URL.createObjectURL(imgFile);
					let img = new Image();
					img.src = url;
					img.onload = function () {
						let canvas = document.createElement('canvas');
						canvas.width = arr[0];
						canvas.height = arr[1];
						let ctx = canvas.getContext('2d');

						// 渲染图片并转化为base64数据
						ctx.drawImage(img, 0, 0, arr[0], arr[1]);
						imgData = canvas.toDataURL('image/png');

						resolve();
					};
					img.onerror = function () {
						reject();
					};
				});
			}

			// 读取图集
			async function fetchAtlas() {
				return new Promise((resolve, reject) => {
					let reader = new FileReader();
					reader.readAsText(atlasFile);
					reader.onload = function () {
						// 读取atlas文件中的宽高值
						let text = reader.result;

						let index1 = text.indexOf('size:');
						let index2 = text.indexOf('format');
						let str = text.slice(index1 + 6, index2 - 1);
						let arr = str.split(',');
						
						console.log(JSON.stringify(text));
						
						// 读取atlas文件中的纹理文件名
						let index3 = text.indexOf('.png');
						filename = text.slice(0, index3);
					    filename = filename.replace(/[\r\n]/g,'');

						// 转化为base64数据
						atlasData = 'data:application/octet-stream;base64,' + btoa(text);

						resolve(arr);
					};
					reader.onerror = function () {
						reject();
					};
				});
			}

			// 读取骨骼
			async function fetchJson() {
				return new Promise((resolve, reject) => {
					let reader = new FileReader();
					reader.readAsText(jsonFile);
					reader.onload = function () {
						// 转化为base64数据
						jsonData = 'data:application/json;base64,' + btoa(reader.result);

						resolve();
					};
					reader.onerror = function () {
						reject();
					};
				});
			}

			// 构建播放器
			async function startPlayer() {
				index.style.display = 'none';
				player.style.display = 'block';

				let rawDataURIs = {};
				rawDataURIs[filename + '.png'] = imgData;
				rawDataURIs[filename + '.atlas'] = atlasData;
				rawDataURIs[filename + '.json'] = jsonData;

				new spine.SpinePlayer('player', {
					jsonUrl: filename + '.json',
					atlasUrl: filename + '.atlas',
					rawDataURIs: rawDataURIs,
					backgroundColor: backgroundColor,
					premultipliedAlpha: false,
				});
			}

			// 点击确认
			certain.onclick = async function () {
				if (imgFile && atlasFile && jsonFile) {
					let arr = await fetchAtlas();
					await fetchTexture(arr);
					await fetchJson();

					if (imgData && atlasData && jsonData) {
						startPlayer();
					}
				} else {
					alert('输入的文件不够哦~ΦωΦ');
					return;
				}
			};
		</script>
	</body>
</html>
